<script setup lang="ts">
import { useTemplateRef } from "vue";
import type { ButtonProps } from "./types.ts";
import HIcon from "../Icon/HIcon.vue";

const { nativeType = 'button' } = defineProps<ButtonProps>()

const _ref = useTemplateRef<HTMLButtonElement>('_ref')

defineExpose({
  _ref
})
</script>

<template>
  <button ref="_ref" class="h-button" :class="{
    [`h-button--${type}`]: type,
    [`h-button--${size}`]: size,
    'is-plain': plain,
    'is-round': round,
    'is-circle': circle,
    'is-disabled': disabled || loading,
    'is-loading': loading

  }" :disabled :autofocus :type="nativeType">
    <h-icon :icon v-if="icon"></h-icon>
    <h-icon icon="spinner" spin v-if="loading"></h-icon>
    <slot></slot>
  </button>
</template>

<style>

</style>
